<template>
	<!-- 学生积分详情 -->
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center kcjf_flex_0_ibhf" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub kcjf_fd0_0_ibhf'>
                    <view class='flex flex-wrap align-center kcjf_fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  kcjf_fd0_0_c0_c0_ibhf'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='kcjf_fd0_0_c1_c0_ibhf'>{{name}}</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end kcjf_fd0_0_c0_ibhf'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex benben-flex-layout flex-wrap align-center kcjf_flex_1_ibhf">
                <view class='flex flex-direction flex-wrap align-stretch kcjf_fd1_0_ibhf'>
                    <view class='flex flex-wrap align-center'>
                        <image class='kcjf_fd1_0_c0_c0_ibhf' mode="aspectFit" :src='STATIC_URL+"jf.png"'></image>
                        <text>总积分</text>
                    </view>
                    <view class='flex flex-wrap align-center kcjf_fd1_0_c1_ibhf'>
                        <text class='kcjf_fd1_0_c1_c0_ibhf'>{{points}}</text>
                    </view>
                </view>
                <view class='flex flex-direction flex-wrap align-stretch kcjf_fd1_1_ibhf'>
                    <view class='flex flex-wrap align-center'>
                        <view class='flex  kcjf_fd1_1_c0_c0_ibhf'></view>
                        <text class='kcjf_fd1_1_c0_c1_ibhf'>积分明细</text>
                        <text class='kcjf_fd1_1_c0_c2_ibhf' @tap.stop="jump">更多</text>
                        <text class='fu-iconfont2  kcjf_fd1_1_c0_c3_ibhf'>&#xe7f2;</text>
                    </view>
                    <view class='flex flex-direction flex-wrap align-stretch'>
                        <view class='flex flex-wrap align-center justify-between kcjf_fd1_1_c1_c0_ibhf' v-for="(item,index) in list" :key='index'>
                            <view class='flex flex-direction flex-wrap align-stretch'>
                                <text class='kcjf_fd1_1_c1_c0_c0_c0_ibhf'>{{item.type}}</text>
                                <text class='kcjf_fd1_0_c1_ibhf'>{{item.create_time}}</text>
                            </view>
                            <view class='flex flex-wrap align-center'>
								<text v-if="item.amount>0" class="kcjf_fd1_1_c1_c1_c1_c0_ibhf">+</text>
                                <text :class='item.amount>0?"kcjf_fd1_1_c1_c1_c1_c0_ibhf":"kcjf_fd1_1_c1_c0_c1_c0_ibhf"'>{{item.amount}}</text>
                            </view>
                        </view>
						<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
												:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
                        <!-- <view class='flex flex-wrap align-center justify-between kcjf_fd1_1_c1_c0_ibhf'>
                            <view class='flex flex-direction flex-wrap align-stretch'>
                                <text class='kcjf_fd1_1_c1_c0_c0_c0_ibhf'>课堂签到获得积分</text>
                                <text class='kcjf_fd1_0_c1_ibhf'>2020.3.20</text>
                            </view>
                            <view class='flex flex-wrap align-center'>
                                <text class='kcjf_fd1_1_c1_c1_c1_c0_ibhf'>+2</text>
                            </view>
                        </view>
                        <view class='flex flex-wrap align-center justify-between kcjf_fd1_1_c1_c0_ibhf'>
                            <view class='flex flex-direction flex-wrap align-stretch'>
                                <text class='kcjf_fd1_1_c1_c0_c0_c0_ibhf'>主题讨论积分</text>
                                <text class='kcjf_fd1_0_c1_ibhf'>2020.3.20</text>
                            </view>
                            <view class='flex flex-wrap align-center'>
                                <text class='kcjf_fd1_1_c1_c0_c1_c0_ibhf'>- 5</text>
                            </view>
                        </view>
                        <view class='flex flex-wrap align-center justify-between kcjf_fd1_1_c1_c0_ibhf'>
                            <view class='flex flex-direction flex-wrap align-stretch'>
                                <text class='kcjf_fd1_1_c1_c0_c0_c0_ibhf'>主题讨论积分</text>
                                <text class='kcjf_fd1_0_c1_ibhf'>2020.3.20</text>
                            </view>
                            <view class='flex flex-wrap align-center'>
                                <text class='kcjf_fd1_1_c1_c0_c1_c0_ibhf'>- 5</text>
                            </view>
                        </view>
                        <view class='flex flex-wrap align-center justify-between kcjf_fd1_1_c1_c0_ibhf'>
                            <view class='flex flex-direction flex-wrap align-stretch'>
                                <text class='kcjf_fd1_1_c1_c0_c0_c0_ibhf'>主题讨论积分</text>
                                <text class='kcjf_fd1_0_c1_ibhf'>2020.3.20</text>
                            </view>
                            <view class='flex flex-wrap align-center'>
                                <text class='kcjf_fd1_1_c1_c0_c1_c0_ibhf'>- 5</text>
                            </view>
                        </view> -->
                    </view>
                </view>
            </view>

            <!---flex布局flex布局结束-->


        </view>
    </page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
    export default {
        components: {},
		mixins: [pagingList],

        data() {
            return {
				course_id:'',//课程id
				points:'',//积分
				name:'',//课程名字
				list:[]
			};
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
			this.course_id=options.id
			this.points=options.points
			this.name=options.name
			this.getlists()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {
			this.getlists()
        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
			jump(){
				uni.navigateTo({
					url:'/pages/My/jfdetail/jfdetail?id='+this.course_id
				})
			},
			async getlists() {
				// let datadatum = await this.$api.get(global.apiUrls.post69168c2d01b8d, {
				// 	course_id:this.course_id
				// });
				// //
				// if (datadatum.data.code != 1) {
				// 	this.$message.info(datadatum.data.msg);
				// 	return
				// }
				//  // this.isup = true
				// let infodatum = datadatum.data;
				// this.list = infodatum.data.data
				// return
				this.minixPagingListsApi = global.apiUrls.post69168c2d01b8d;
				this.pageingListApiMethod ='post';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent ={
					course_id:this.course_id
				}
				
				this.listData = [];
				this.list = this.listData;
				this.pagingListToggle();
				this.$forceUpdate()
			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			}
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;

        .kcjf_flex_1_ibhf {
            padding: 24rpx;

            .kcjf_fd1_0_ibhf {
                background: linear-gradient(161deg, #3090FF 0%, #145EFD 100%);
                width: 702rpx;
                height: 210rpx;
                border-radius: 16rpx;
                padding: 40rpx;
                color: var(--benbenFontColor3);

                .kcjf_fd1_0_c0_c0_ibhf {
                    width: 36rpx;
                    height: 36rpx;
                    border-radius: 0rpx;
                    margin: 0rpx 16rpx 0rpx 0rpx;
                }
            }

            .kcjf_fd1_1_ibhf {
                width: 100%;
                margin: 40rpx 0rpx 0rpx 0rpx;

                .kcjf_fd1_1_c0_c0_ibhf {
                    width: 6rpx;
                    height: 24rpx;
                    background: rgba(20, 94, 253, 1);
                    margin: 0rpx 10rpx 0rpx 10rpx;
                    transform: scaleX(0.5);
                }

                .kcjf_fd1_1_c0_c1_ibhf {
                    color: #333333;
                    font-size: 32rpx;
                    font-weight: 600;
                    line-height: 45rpx;
                    text-align: center;
                    font-style: normal;
                }

                .kcjf_fd1_1_c0_c2_ibhf {
                    margin: 0rpx 16rpx 0rpx auto;
                    color: rgba(102, 102, 102, 1);
                }

                .kcjf_fd1_1_c0_c3_ibhf {
                    font-size: 24rpx;
                }
            }
        }

        .kcjf_fd1_0_c1_ibhf {
            margin: auto 0rpx 0rpx 0rpx;

            .kcjf_fd1_0_c1_c0_ibhf {
                color: #FFFFFF;
                font-size: 48rpx;
                font-weight: 700;
                line-height: 29rpx;
                text-align: left;
                font-style: normal;
            }
        }

        .kcjf_fd1_1_c1_c0_ibhf {
            height: 153rpx;
            padding: 32rpx 0rpx 32rpx 0rpx;
            border-bottom: 1px solid rgba(238, 238, 238, 1);
        }

        .kcjf_fd1_1_c1_c0_c0_c0_ibhf {
            color: #333333;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 53rpx;
            text-align: left;
            font-style: normal;
        }

        .kcjf_fd1_1_c1_c0_c1_c0_ibhf {
            color: #333333;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 45rpx;
            text-align: right;
            font-style: normal;
        }

        .kcjf_fd1_1_c1_c1_c1_c0_ibhf {
            color: rgba(255, 64, 64, 1);
            font-size: 32rpx;
            font-weight: 700;
            line-height: 45rpx;
            text-align: right;
            font-style: normal;
        }

        .kcjf_flex_0_ibhf {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .kcjf_fd0_0_ibhf {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .kcjf_fd0_0_c1_c0_ibhf {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .kcjf_fd0_0_c0_ibhf {
            width: 120rpx;

            .kcjf_fd0_0_c0_c0_ibhf {
                font-size: 36rpx;
                color: #333;
            }
        }
    }
</style>
